<template>
  <div class="u-m-t-48">
    <div class="u-main-color u-m-b-36 font-bold u-font-xl">最新资讯</div>
    <scroll-view class="box-suggest" scrollX="true">
      <view class="box-hot" v-for="(column, index) of list" :key="index">
        <view>
          <view v-for="(item, rowIndex) of column" :key="rowIndex">
            <view @click="onClickItem(item)" class="navigator hover-scale">
              <view class="u-m-b-6">
                <u-tag
                  :text="item.tag"
                  size="mini"
                  shape="circle"
                  :type="item.type"
                ></u-tag>
              </view>
              <view class="content line-limit-length">{{ item.title }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      let News = new wx.BaaS.TableObject("news")
      const res = await News.select(["tag", "title", "type", "id"])
        .limit(10)
        .orderBy(["-created_at"])
        .find()
      let list = []
      for (var i = 0; i < res.data.objects.length; i += 2) {
        list.push(res.data.objects.slice(i, i + 2))
      }
      this.list = list
    },

    onClickItem(item) {
      this.$u.route({
        url: "/pages/new/detail",
        params: {
          id: item.id,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.box-suggest {
  margin-bottom: 22upx;
  border-radius: 18px;

  white-space: nowrap;

  background: #ecf0f3;

  box-shadow: 6px 6px 12px #c2c2c6, -6px -6px 12px #ffffff;
}

.box-suggest .box-hot {
  display: inline-block;

  position: relative;

  vertical-align: top;

  background: #ecf0f3;
}

.box-suggest .box-hot:first-of-type {
  // margin-left: 30rpx;
  border-top-left-radius: 16upx;
  border-bottom-left-radius: 16upx;
  padding-left: 40upx;
}

.navigator {
  &__bg {
    position: absolute;
  }
}

.box-suggest .box-hot:first-of-type > view > view .navigator {
  position: relative;

  margin-left: 0;
}

.box-suggest .box-hot:last-of-type {
  margin-right: 30upx;
  border-top-right-radius: 16upx;
  border-bottom-right-radius: 16upx;
  padding-right: 40upx;
}

.box-suggest .box-hot:last-of-type > view > view::after {
  width: 0;
}

.box-suggest .box-hot > view {
  display: flex;

  margin-left: 40upx;

  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: center;
}

.box-suggest .box-hot > view:first-of-type {
  margin-left: 0;
}

.box-suggest .box-hot > view > view {
  position: relative;

  padding: 40upx 40upx 30upx 0upx;
  width: 300upx;
  height: 200upx;
}

.box-suggest .box-hot > view > view .navigator {
  margin-left: 40upx;
}

.box-suggest .box-hot > view > view .navigator > view {
  display: flex;

  position: relative;

  flex-flow: column nowrap;
  justify-content: flex-start;
}

.box-suggest .box-hot > view > view .navigator > view > .type {
  display: flex;

  border: solid #2e5aff 2upx;
  border-radius: 4upx;
  width: 62upx;
  height: 34upx;

  font-size: 22upx;
  text-align: center;

  color: #2e5aff;

  align-items: center;
  justify-content: center;
}

.box-suggest .box-hot .content {
  display: -webkit-box !important;
  overflow: hidden !important;

  -webkit-box-orient: vertical;

  margin-bottom: 12rpx;

  font-size: 30upx;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  word-break: break-all !important;

  color: #323e68;

  -webkit-line-clamp: 2 !important;
}

.box-suggest .box-hot > view > view .navigator > view > .rate {
  position: absolute;
  top: -10px;
  left: 50px;

  font-size: 30px;
  font-weight: 900;

  color: white;
}

.box-suggest .box-hot > view > view .navigator > view > .numbers {
  display: flex;

  position: absolute;
  bottom: 30upx;

  font-size: 22upx;

  color: #abaeba;

  flex-flow: nowrap row;
  align-items: center;
}

.box-suggest .box-hot > view > view:first-of-type {
  border-bottom: 1upx solid #dfe4f8;
}

.box-suggest .box-hot > view > view:last-of-type {
  padding: 30upx 40upx 40upx 0upx;
}

.box-suggest .box-hot > view > view::after {
  position: absolute;
  right: 0;
  bottom: 0;

  width: 1upx;
  height: 158upx;

  background: #dfe4f8;

  content: " ";
}

.box-suggest .box-hot > view > view:last-of-type:after {
  top: 0;
}
</style>
